<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('测点明细')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
          <div class="col-sm-12">
            <div class="col-sm-12 search-collapse" style="z-index:1;">
                <form id="formId" class="form-inline">
                    <div class="select-list">
                        <ul>
                            <li>
                             <div>
                                <input type="text" class="form-control" id="startTime" name="startTime" th:value="${startTime}" style="width:150px;">
                                <span>到</span>
                                <input type="text" class="form-control" id="endTime" name="endTime" th:value="${endTime}"  style="width:150px;">
                            </div>
                            </li>
                                                        <li>
                                <p>Pi名称</p>
                                <input type="text"  id="pitagname" name="pitagname" th:value ="${pitagname}"/>
                            </li>
                            <li>
                                <p>对比Pi名称</p>
                                <input type="text"  id="pitagname2" name="pitagname2" />
                            </li>
                            
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="initData()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
               <div class="echarts" id="echarts-line-chart" style="width: 100%; height: 400px;"></div>
            </div>
             
        </div>
    </div>
    <th:block th:include="include :: footer" />
     <th:block th:include="include :: echarts-js" />
     <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">

    $(function() {
	    $("#startTime").datetimepicker({
		    format: "yyyy-mm-dd hh:ii:ss",
		    autoclose: true
		});
    $("#endTime").datetimepicker({
		    format: "yyyy-mm-dd hh:ii:ss",
		    autoclose: true
		});
    	initData();
    }); 
    
    function initData(){
    var startTime =$("#startTime").val();
    var endTime =$("#endTime").val();
    var pitagname =$("#pitagname").val();
    var pitagname2 =$("#pitagname2").val();
     var url=  "getTagDetail?startTime="+startTime+"&endTime="+endTime +"&pitagname="+pitagname+"&pitagname2="+pitagname2;
    $.get(url, function(res) {
        	if (res.code == "0") {
        		$.modal.msgError('获取数据失败');
        		return;
        	}
        	drawChart("", res.xchart, res.ychartList,res.legend);       	
       });
    }
    
    function drawChart(title,xdata,ychartList,legend){
    	  var lineChart = echarts.init(document.getElementById("echarts-line-chart"),'dark');
    	   var option = {
	       		    title: {
	       		        text: title
	       		    },
	        		
	        		    tooltip: {
	        		        trigger: 'axis'
	        		    },
	        		   legend: {
	        		      
	        		    },
	        		   
	        		    grid: {
	        		        containLabel: true
	        		    },
	        		    xAxis: {
	        		        type: 'category',
	        		        axisLabel:{
	        		        	//interval:10,
	        		        	showMaxLabel: true
	        		        },
	        		        data:xdata
	        		    },
	        		    yAxis: {
	        		    	 type: 'value',
	        		          
	        		          axisLine: {
	        		            lineStyle: {
	        		              color: '#fff'
	        		            }
	        		          },
	        		          axisLabel: {
	        		            textStyle: {
	        		              color: '#ffff'
	        		            }
	        		          }
	        		    },
	        		    series: ychartList,
	        		    
	          
	        };
    	   lineChart.setOption(option);
    	  
    }    
    </script>
      
</body>
</html>